<template>
	<sl-page title="添加银行卡">
		<!-- 表单组件 -->
		<view class="bankCards">
			<view class="s-form">
				<view class="s-form__item">
					<view class="s-form__item--label flex-basis-30">银行名称</view>
					<view class="s-form__item--control">
						<input class="form-item--input" type="text" v-model="form.bankName" maxlength="30"
							placeholder="请输入银行名称" />
					</view>
				</view>
				<view class="s-form__item">
					<view class="s-form__item--label flex-basis-30">银行开户行</view>
					<view class="s-form__item--control">
						<input class="form-item--input" type="text" v-model="form.bankDepositName" maxlength="11"
							placeholder="请输入银行开户行名称" />
					</view>
				</view>
				<view class="s-form__item">
					<view class="s-form__item--label flex-basis-30">本人账户名称</view>
					<view class="s-form__item--control">
						<input class="form-item--input" type="text" v-model="form.name" maxlength="11"
							placeholder="请输入本人账户名称" />
					</view>
				</view>
				<view class="s-form__item">
					<view class="s-form__item--label flex-basis-30">本人银行卡号</view>
					<view class="s-form__item--control">
						<input class="form-item--input" type="number" v-model="form.cardNo" maxlength="16"
							placeholder="请输入本人银行卡号" />
					</view>
				</view>
			</view>
		</view>
		<view class="action btn-primary" :class="{'disable': !verifyPassed}" @click.stop="onSubmit()">保存
		</view>
	</sl-page>
</template>

<script>
	import * as Verify from '@/utils/verify';
	import AccountApi from '@/api/finance/account.js';
	import Constants from '@/constants';

	export default {
		//
		name: 'createBankCards',
		//
		mixins: [Constants],
		//
		components: {},

		//
		data() {
			return {
				form: {
					bankName: '',
					bankDepositName: '',
					name: '',
					cardNo: '',
					defaultFlag: '0'
				},

				verifyPassed_bankName: false,
				verifyPassed_bankDepositName: false,
				verifyPassed_name: false,
				verifyPassed_cardNo: false,
			};
		},
		//
		watch: {
			'form.bankName': function() {
				this.verifyPassed_bankName = this.VerifyBankName();
			},
			'form.bankDepositName': function() {
				this.verifyPassed_bankDepositName = this.VerifyBankDepositName();
			},
			'form.name': function() {
				this.verifyPassed_name = this.VerifyName();
			},
			'form.cardNo': function() {
				this.verifyPassed_cardNo = this.VerifyCardNo();
			},
		},
		//
		computed: {
			verifyPassed: function() {
				return this.verifyPassed_bankName && this.verifyPassed_bankDepositName &&
					this.verifyPassed_name && this.verifyPassed_cardNo;
			}
		},
		//
		methods: {
			//
			VerifyBankName: function() {
				return !Verify.isEmpty(this.form.bankName);
			},
			VerifyBankDepositName: function() {
				return !Verify.isEmpty(this.form.bankDepositName);
			},
			VerifyName: function() {
				return !(Verify.isEmpty(this.form.name))
			},
			VerifyCardNo: function() {
				return !(Verify.isEmpty(this.form.cardNo))
			},
			//
			onSubmit() {
				if (!this.VerifyBankName()) {
					this.$app.toast('请输入银行名称')
					return;
				}
				if (!this.VerifyBankDepositName()) {
					this.$app.toast('请输入银行开户行')
					return;
				}
				if (!this.VerifyName()) {
					this.$app.toast('请输入本人账户名称')
					return;
				}
				if (!this.VerifyCardNo()) {
					this.$app.toast('请输入本人银行卡号')
					return;
				}
				// 提交收货地址
				this.doSubmit();
			},
			//
			doSubmit() {
				AccountApi.save(this.form).then((res) => {
					console.log('res:-----------aaaa ', res);
					if (res.success) {
						// this.$app.toast('添加银行卡成功');
						this.onBackPage();
					}
				});
			},
			//
			onBackPage: function() {
				this.$app.redirectTo(this.pages.bankCardsAccountPage);
			}
		}
	};
</script>

<style lang="scss" scoped>

</style>